<template>
  <div class="call_page">
    <ul class="call_list">
      <li
        class="call_item"
        v-for="(item,index) in phoneList"
        :key="index"
        @click="callPhone(item.phone)"
      >
        <h2>{{item.mountain_name}}</h2>
        <span>{{item.authorize | authorizeType}}</span>
        <span>{{item.name}}</span>
        <a class="tels" :href="item.phone" ref="tels">{{item.phone | phoneNum}}</a>
      </li>
      <li v-show="noMoreData" class="noMoreData">没有更多数据了</li>
    </ul>
  </div>
</template>

<script>
import { getPhone } from "api/call";
import { getToken } from "../../utils/changeToken";
import { throtTling } from "utils/throttling.js";
import { getScrollTop, getScrollHeight, getWindowHeight } from "utils/scroll";

export default {
  name: "CallPage",
  data() {
    return {
      phoneList: [],
      page: 1,
      limit: 10,
      // 没有更多数据
      noMoreData: false,
    };
  },
  mounted() {
    this.getPhone();
    this.$nextTick(() => {
      window.addEventListener("scroll", this.menu);
    });
  },
  methods: {
    menu: throtTling(function () {
      if (!this.noMoreData) {
        // 此时还有剩余数据未加载完
        let scroll = getScrollTop() + getWindowHeight() - getScrollHeight();
        if (scroll > -400) {
          //400：距离底部多少像素开始触发
          this.page += 1;
          this.getPhone();
        }
      }
    }, 600),

    getPhone() {
      // 本地获取token
      let token = getToken();
      getPhone(token, this.page, this.limit).then((res) => {
        if (res.code == 200) {
          this.phoneList.push(...res.data.data);
          if (res.data.data.length <= 0) {
            this.noMoreData = true;
          }
        } else {
          this.$toast({
            message: res.msg,
          });
        }
      });
    },
  },
  filters: {
    authorizeType(type) {
      if (type == 1) {
        return "区级山长";
      } else if (type == 2) {
        return "乡镇级山长";
      } else {
        return "巡查员";
      }
    },
    phoneNum(num) {
      return num.split(":")[1];
    },
  },
  //离开删除绑定事件
  beforeDestroy() {
    this.page = 1;
    this.noMoreData = false
    window.removeEventListener("scroll", this.menu);
  },
};
</script>

<style lang="less" scoped>
.call_page {
  padding: 18px;
  background: #f7f9fb;
  .call_list {
    font-size: 15px;
    .call_item {
      position: relative;
      margin-top: 20px;
      padding: 18px;
      background: #fff;
      border-radius: 8px;
      .tels {
        position: absolute;
        top: 0;
        left: 0;
        width: 95%;
        height: 100%;
        line-height: 120px;
        text-align: right;
      }
      h2 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 16px;
      }
      & span:nth-child(3) {
        margin: 0 80px 0 20px;
      }
      & span:nth-child(4) {
        float: right;
      }
    }
    .noMoreData {
      text-align: center;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
    }
  }
}
</style>